<template lang="html">
  <article id="views-coach_order_detail">
    <Info :orderDetail="orderDetail"></Info>
    <List :list="students"></List>
    <BackBtn></BackBtn>
  </article>
</template>

<script>
import utils from '@/lib/utils'
import superagent from 'superagent'
import authMiddleWare from '@/lib/auth-middleware'

export default {
  name: 'PageOrderDetail',
  components: {
    Info: require('@/components/coach-order_detail/info'),
    List: require('@/components/coach-order_detail/list'),
    BackBtn: require('@/components/common_back_button')
  },
  data(){
    return {
      orderDetail: null,
      students: []
    }
  },
  methods: {
    getStudentsList(subjectId){
      return utils.requestFactory({
        url: `/api/subject/students/${subjectId}`,
        type: 'post'
      })
    },
    getOrderDetail(subjectId){
      return utils.requestFactory({
        url: `/api/subject/info`,
        type: 'post',
        params: {
          subjectId
        }
      })
    }
  },
  created(){
    let subjectId = this.$route.params.subject_id
    this.getStudentsList(subjectId)()
    .then(data => {
      data = data.students
      if(!utils.isArray(data)){
        throw new Error('data of getStudentsList is now an Array')
      } else {
        this.students = data
      }
    })
    .catch(e => {
      console.log(e);
    })

    this.getOrderDetail(subjectId)()
    .then(data => {
      this.orderDetail = data
    })
    .catch(e => {
      console.log(e);
    })

  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
#views-coach_order_detail{
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 78px 41px;
  padding-bottom: $backbtn-height+20px;
  background-color: $common-black;
  .coach_order_detail-drawback{
    margin: 0 auto;
    display: block;
    width: 308px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    border-radius: 15px;
    color: #000;
    font-size: 33px;
    letter-spacing: 1Px;
    background-color: $common-red;
    &:active{
      // color: $active-font;
      background-color: $active-bg;
    }
  }
}
</style>
